<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>老师端管理列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/base.css"/>
		<style>
			html, body {
				background-color: #ffffff;
			}
			.competition-top-tag {
				background-size: 20px;
				background-image: url(../../image/icon_qiye_infon.png);
				background-position: center left;
				background-repeat: no-repeat;
				padding-left: 30px;
				font-size: 14px;
				color: #000000;
				line-height: 40px;
				/*   margin-left: 15px;*/
				/*  background-color: #f3f5f7;*/
			}
			#mian {
				background-color: #ffffff;
		/*		padding-left: 10px;
				padding-right: 10px;*/
			}
			.selectCompany .wraptop {
				position: relative;
				width: 100%;
				background: #fff;
				z-index: 99;
			}
			.selectCompany .dropdown {
				    top: 10px;
				    left: 50%;
				    width: 85%;
				    height: 40px;
				    border: 1px solid #d9d9d9;
				    margin: 10px 30px;
				    line-height: 40px;
			}
			.selectCompany .sanjiao {
				display: inline-block;
				width: 40px;
				height: 100%;
				float: right;
				border-left: 1px solid #18b4ed;
				position: relative;
				background: #18b4ed;
			}
			.selectCompany .sanjiao img {
				position: absolute;
				left: 50%;
				top: 35%;
                width: 16px;
				transform: translate(-50%, 0);
				-webkit-transform: translate(-50%, 0);
			}
			.selectCompany .className {
				text-indent: 20px;
				font-size: 14px;
				width: 85%;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden
			}
			.selectCompany .droplist {
				position: absolute;
				width: 90%;
				left: 32px;
				top: 52px;
				border-radius: 0px;
				opacity: 1;
				z-index: 999;
			}
			.selectCompany .span1 {
				margin-top: 19px;
			}
			.job-chart-div {
				width: 50%;
				height: 160px;
			}
			.job-chart-div-right {
				width: 45%;
				height: 160px;
				margin-left: 10px;
				margin-top: 30px;
			}
			.line-height-42 {
				line-height: 42px;
			}
			.mui-table-view-cell {
				position: relative;
				overflow: hidden;
				/* padding: 11px 15px; */
				padding-left: 15px;
				padding-right: 15px;
				padding-top: 11px;
				padding-bottom: 0px;
				-webkit-touch-callout: none;
			}
			.img-type-style {
				width: 30px;
				height: 30px;
				position: absolute;
				top: 15px;
				right: 10px;
			}
			.hand-style {
				border-radius: 60px;
				width: 42px;
				height: 42px;
			}
			.right10 {
				padding-right: 30px;
			}
			.job-chart-img1 {
				background-size: 20px;
				background-image: url(../../icon/icon-first-stage.png);
				background-position: center left;
				background-repeat: no-repeat;
				padding-left: 30px;
				font-size: 14px;
				color: #333333;
			}
			.job-chart-img2 {
				background-size: 20px;
				background-image: url(../../icon/icon-second-stage.png);
				background-position: center left;
				background-repeat: no-repeat;
				padding-left: 30px;
				font-size: 14px;
				color: #333333;
				margin-top: 8px;
				margin-bottom: 8px;
			}
			.job-chart-img3 {
				background-size: 20px;
				background-image: url(../../icon/icon-fourth-stage.png);
				background-position: center left;
				background-repeat: no-repeat;
				padding-left: 30px;
				font-size: 14px;
				color: #333333;
			}
			.mui-table-view {
				/*background-color: #f3f5f7;*/
			}
			.color1 {
				color: #f16bae;
			}
			.color2 {
				color: #ff9900;
			}
			.color3 {
				color: #a3d146;
			}
			#dropdownlist {
				position: absolute;
				width: 85%;
				left: 30px;
				top: 50px;
				z-index: 999;
				background-color: #f3f3f3;
				padding-left: 5px;
				padding-right: 5px;
			}
			#dropdownlist > div {
				/*		line-height: 32px;*/
				font-size: 14px;
				color: #333333;
				margin-top: 6px;
			}
		</style>
	</head>
	<body>
		<div id="mian" class="clearfix ">
		<div style=" padding-left: 10px;padding-right: 10">
			<div class="competition-top-tag">
				实习企业详情
			</div>
			</div>
			<div id="company_chart" style="width:100%; height:166px"></div>
			<div class="selectCompany clearfix">
				<div id="" class="wraptop">
					<div class="dropdown left" id="dropdownbtn">
						<span id="className" class="className"  value="" >师傅端代办事宜师傅端代办事宜师傅端代办事宜师傅端代办事宜师傅端代办事宜师傅端代办事宜师傅端代办事</span>
						<span class="sanjiao"><img src="../../image/icon_competion_down.png" alt=""></span>
					</div>
					<div id="dropdownlist">
						<!--<div>
						师傅端代办事宜师傅端代办事宜师傅端代办事宜师傅端代办事宜师傅端代办事宜师傅端代办事宜师傅端代办事宜师傅端代办事宜
						</div>
						<div>
						111
						</div>-->
					</div>
					<!--		<div id="dropdownlist" >
					<ul id = "classgroup" class="mui-table-view" style="background: #FFFFFF;padding-right: 40px;">
					<li class="mui-table-view-cell">1111</li>
					<li class="mui-table-view-cell">22222</li>
					</ul>
					</div>-->
				</div>
			</div>
			<div class=" clearfix" >
				<div id="job_chart"  class="left job-chart-div"></div>
				<div  class="left job-chart-div-right">
					<div class="job-chart-img1">
						第一阶段岗位人数:<em id="job1" class="color1">0</em>人
					</div>
					<div class="job-chart-img2">
						第二阶段岗位人数:<em id="job2" class="color2">0</em>人
					</div>
					<div class="job-chart-img3">
						第三阶段岗位人数:<em id="job3" class="color3">0</em>人
					</div>
				</div>
			</div>
			<div style="height: 8px;width: 100;background-color: #f3f5f7;"></div>
			<ul class="mui-table-view " id="divlist" >
			<!--<li class="mui-table-view-cell ">
				<img class="mui-media-object mui-pull-left" src="../../image/icon_head_ask_class.png">
				<div class="mui-media-body line-height-42 ">
				<span class="base_content_font base_dark_grey ">琦玉</span>
				<div class="mui-pull-right ">
				<span class="mui-media-body line-height-42 right10 base_content_font base_dark_grey ">业务员</span><img class="img-type-style" src="../../image/icon_first_round_ing.png">
				</div>
				</div>
				</li>
				<li class="mui-table-view-cell ">
				<img class="mui-media-object mui-pull-left" src="../../image/icon_head_ask_class.png">
				<div class="mui-media-body line-height-42">
				琦玉
				<div class="mui-pull-right ">
				<span class="mui-media-body line-height-42 right10 base_content_font base_dark_grey ">业务员</span><img class="img-type-style" src="../../image/icon_first_round.png">
				</div>
				</div>
				</li>-->
			</ul>
		</div>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button"  onclick="loadData()"class="mui-btn mui-btn-outlined">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/echarts.min.js"></script>
	<script src="../../script/common.js"></script>
	<script type="text/javascript">
		var page = 1;
		var row = 10;
		var refreshCount = 0;
		var pageParam = '';
		var currentClassid = '';
		var sxqyid = '';
		//企业id
		//新请求到的数据条数
		apiready = function() {
			$('#dropdownlist').hide();
			loadNewData();
			setRefreshHeader();
			setPullUpRefresh();
			dropdownClick();
			sendBuriedNotifi('0', '实习管理列表', '234');
		}
		function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
			var userinfo = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjid'),
				uname : $api.getStorage('cfnetppusername'),
			}
			var data = {
				busionessid : busionessid,
				pagetype : pagetype,
				pagetypeid : pagetypeid,
				sourceurl : api.pageParam.sourceurl,
				sourcetitle : api.pageParam.sourcetitle,
				accesspageurl : window.location.pathname,
				accesspagetitle : document.title,
				userinfo : userinfo
			}
			SendBehaviorTrajectoriesNotifi_Study(data);
		}

		function loadNewData() {
			page = 1;
			loadData();
		}

		function loadMoreData() {
			page++;
			loadData();
		}

		//获取班级学生列表
		function loadData() {
			showProgress();
			pageParam = api.pageParam;
			var params = {
				jid : $api.getStorage('cfnetppjid'),
				uid : $api.getStorage('cfnetppuid'),
				sxqyid : sxqyid, //企业id
				page : page,
				rows : row
			};
//									alert(JSON.stringify(params));
			cfnetppPOST(url_getTeacherManage, params, true, function(data, status) {
//																alert(JSON.stringify(data));
				api.hideProgress();
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					if (data.code == 200) {
						var list = data.data;
						var enterprise_list = list.enterprise_list;
						//						if (enterprise_list.constructor == Array && enterprise_list.length > 0) {
						if (enterprise_list != undefined && enterprise_list != '') {
							var classHtmlString = '';
							for (var i = 0; i < enterprise_list.length; i++) {
								var classData = enterprise_list[i];
								classHtmlString += htmlStringWithNames(classData);
							}
							$('#dropdownlist').html(classHtmlString);
							setupClassCellClick();
							setEnterpriseChart(enterprise_list);
							$("#className").text(enterprise_list[0].names);
						}
						var students = list.list;
						refreshCount = students.length;
						if (students != '' && students.constructor == Array && students.length > 0) {
							$('#noData').hide();
							$('#noNet').hide();
							$('#mian').show();
							writelist(students, students.length);
							var datasss = data.data.statistics;
							setjobChart(data.data.statistics);
						} else {
							if (page == 1) {
								$('#noData').show();
								$('#noNet').hide();
								$('#mian').hide();
							}
						}
					} else if (data.code = 109) {
						if (page == 1) {
							$('#noData').show();
							$('#noNet').hide();
							$('#mian').hide();
						}
					} else {
						if (page == 1) {
							$('#noData').show();
							$('#noNet').hide();
							$('#mian').hide();
						}
					}
				} else {
					$('#noData').hide();
					$('#noNet').show();
					$('#mian').hide();
				}
			});
		}

		//拼接企业列表
		function htmlStringWithNames(classgroup) {
			return '<div classgroupid="' + classgroup.id + '" >' + classgroup.names + '</div>';
		}

		function dropdownClick() {
			// 点击出下拉菜单
			$("#dropdownbtn").click(function() {
				$('#dropdownlist').toggle();
			});
		}

		function setupClassCellClick() {
			$('#dropdownlist div').unbind('click');
			$('#dropdownlist div').click(function() {
				//				 $('#dropdownlist').toggleClass('show');
				$('#dropdownlist').toggle();
				$("#className").text($(this).text());
				sxqyid = $(this).attr('classgroupid');
				page = 1;
				loadData();
			});
		}

		function setEnterpriseChart(data) {
			var companyArr = new Array();
			for (var i = 0; i < data.length; i++) {
				var person = new Object();
				person.value = data[i].qy_num;
				//       person.name= '';
				person.name = data[i].names+":"+data[i].qy_num+"人";
				companyArr.push(person);
			}
			var myChart = echarts.init(document.getElementById('company_chart'));
			option = {
//				tooltip : {
//					trigger : 'item',
//					formatter : "{a} <br/>{b}: {c} ({d}%)",
//                  
//					position : function(point, params, dom) {
//			      	var posDis = window.innerWidth - dom.offsetWidth;
//						return posDis < point[0] ? [posDis, '10%'] : [point[0], '10%'];
//					},
//				},
				series : [{
					name : '企业',
					type : 'pie',
//					radius : ['50%', '70%'],
						radius : [48, 70],
					avoidLabelOverlap : false,
					funnelAlign : 'right',
					label : {
						normal : {
							show : false,
							position : 'center',
						},
						emphasis : {
							show : true,
							textStyle : {
								fontSize : '14',
								fontWeight : 'bold'
							},
						}
					},
					color : ['#00a8ff', '#fc6866', '#fbea0c', '#ab74e9', '#ea68a2', '#01da8e'],
					data : companyArr
				}]
			};
			myChart.setOption(option);
		}

		function setjobChart(data) {
			if (page == 1) {
				$("#job1").html(data[0].gw_num);
				var gw_num2 = data[1].gw_num + '';
				//				alert(gw_num2=='');
				if (gw_num2 == '') {
					$("#job2").html(0);
				} else {
					$("#job2").html(data[1].gw_num);
				}
				var gw_num3 = data[2].gw_num + '';
				//				alert(gw_num3=='');
				if (gw_num3 == '') {
					$("#job3").html(0);
				} else {
					$("#job3").html(data[2].gw_num);
				}
				//				alert(JSON.stringify(data));
				var myChart = echarts.init(document.getElementById('job_chart'));
				option = {
		
//					legend : {
//						orient : 'vertical',
//						x : 'right',
//						borderRadius : 4,
//						itemWidth : 2,
//						itemHeight : 2,
//					},
					series : [{
						name : '阶段分布',
						type : 'pie',
					radius : [48, 70],
					center : [90,80],
						avoidLabelOverlap : false,
						label : {
							normal : {
								show : false,
								position : 'center',
								align : 'right',
							},
							emphasis : {
								show : true,
								textStyle : {
									fontSize : '14',
									fontWeight : 'bold'
								},
							}
						},
						color : ['#f16bae', '#ff9900', '#a3d146'],
						data : [{
							value : data[0].gw_num,
							name : data[0].gwtypename ,
						}, {
							value : data[1].gw_num,
							name : data[1].gwtypename ,
						}, {
							value : data[2].gw_num,
							name : data[2].gwtypename,
						}]
					}]
				};
				myChart.setOption(option);
			}
		}

		function writelist(quar_list, len) {
			var strhtml = '';
			for (var i = 0; i < len; i++) {
				data = quar_list[i];
				var score = '';
				var imgurl = '';
				if (data.gwtype == 1) {//第一阶段
					if (data.status == 1) {
						imgurl = "../../image/icon_first_round_ing.png";
					} else {
						imgurl = "../../image/icon_first_round.png";
					}
				} else if (data.gwtype == 2) {//第2阶段
					if (data.status == 1) {
						imgurl = "../../image/icon_second_round_ing.png";
					} else {
						imgurl = "../../image/icon_second_round.png";
					}
				} else if (data.gwtype == 3) {//第3阶段
					if (data.status == 1) {
						imgurl = "../../image/icon_three_round_ing.png";
					} else {
						imgurl = "../../image/icon_three_round.png";
					}
				} else if (data.status == 0) {//未开始
					imgurl = "../../image/icon_no_start.png";
				}
				var str = '<li class="mui-table-view-cell " onclick="itemclick(' + data.uid + ')">' + '<img class="mui-media-object mui-pull-left hand-style" src=' + HeadPortraitIsNull(data.picurl) + '>' + '<div class="mui-media-body line-height-42 ">' + '<span class="base_content_font base_dark_grey ">' + data.username + '</span>' + '<div class="mui-pull-right ">' + '<span class="mui-media-body line-height-42 right10 base_content_font base_dark_grey ">' + data.titles + '</span><img class="img-type-style" src=' + imgurl + '>' + '</div></div></li>';
				strhtml = strhtml + str;
			}
			if (page == 1) {
				$('#divlist').html(strhtml);
			} else {
				$('#divlist').append(strhtml);
			}
		}

		function itemclick(uid) {
			api.openWin({useWKWebView:true,
				name : 'Student_completionReportWindow',
				url : '../Practice_Student/PositionDetailsViewWind.html',
				pageParam : {
					sourceurl : window.location.pathname,
					sourcetitle : document.title,
					uid : uid,
				}
			});
			sendBuriedNotifi('1', '实习管理列表', '234');
		}

		function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
			var userinfo = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjid'),
				uname : $api.getStorage('cfnetppusername'),
			}
			var data = {
				busionessid : busionessid,
				pagetype : pagetype,
				pagetypeid : pagetypeid,
				sourceurl : api.pageParam.sourceurl,
				sourcetitle : api.pageParam.sourcetitle,
				accesspageurl : window.location.pathname,
				accesspagetitle : document.title,
				userinfo : userinfo
			}
			SendBehaviorTrajectoriesNotifi_Study(data);
		}
	</script>
</html>